<template>
<div>
  <el-table
      :data="tableData.filter(data => !search || data.uname.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
    <el-table-column
        label="城市"
        prop="ocity">
    </el-table-column>
    <el-table-column
        label="姓名"
        prop="uname">
    </el-table-column>
    <el-table-column
        prop="ostatus"
        label="标签"
        width="100"
        filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.ostatus === '预约' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.ostatus}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        label="订单编号"
        prop="oid">
    </el-table-column>
    <el-table-column
        label="疫苗名称"
        prop="vname">
    </el-table-column>
    <el-table-column
        align="right">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      style="margin-top: 20px"
      :page-size="pageSize"
      :pager-count="11"
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      @current-change="page"
      :total="parseInt(total)">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "AppointmentMsg",
  data() {
    return {
      pageSize: 6,
      currentPage: 1,
      total: "",
      tableData: null,
      search: '',
      type:'success'
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    page(currentPage){
      axios({
        url: `http://localhost:88/api/order/order/getOrderList/${currentPage}/${this.pageSize}`,
        method: 'get'
      }).then((res) => {
        if (res.data.code === 0) {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
        }
      })
    },
  },
  mounted() {
    axios({
      url:`http://localhost:88/api/order/order/getOrderList/1/${this.pageSize}`,
      method:'get',
    }).then(res => {
      console.log(res)
      this.tableData = res.data.data.data
      this.total = res.data.data.total
    })
  }
}
</script>

<style scoped>

</style>
